<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">实时用户</block>
		</cu-custom>
		<view>
			<view class="search bg-white m-all20 border-radius">
				<view class="icon cuIcon-search mt20 mb20 ml20"></view>
				<view class="input mt20 mb20">
					<input v-model="phone" clear :maxlength="11" type="text" placeholder="请输入手机号" />
				</view>
				<view class="btn" @tap.stop="search">搜索</view>
			</view>
		</view>
		<view>
			<view class="cu-list">
				<view
					class="cu-item m-all20 p-all24 bg-white border-radius"
					v-for="(item, index) in tableData"
					:key="index">
					<view class="top flex">
						<view class="headingImg">
							<image :src="item.headimgUrl" mode="scaleToFill" />
						</view>
						<view class="flex1 ml20 userInfo">
							<view>
								<text>直播间:</text>
								<text class="ml10">{{ item.liveName }}</text></view
							>
							<view>
								<text class="f32">用户名称:</text>
								<text class="32">{{ item.nickName }}</text></view
							>
							<view>
								<text>手机号:</text>
								<text>{{ item.phone }}</text>
							</view>
						</view>
						<view class="flex-center">
							<button
								:class="'bg-' + theme.backgroundColor"
								class="cu-btn round"
								@tap.stop="handleBan(item.userId)">
								拉黑
							</button>
						</view>
					</view>
				</view>
			</view>
			<view :class="'cu-load bg-gray ' + (loadmore ? 'loading' : 'over')"></view>
		</view>
	</view>
</template>
<script>
const app = getApp();
import util from "utils/util";
import api from "utils/api";
export default {
	data() {
		return {
			theme: app.globalData.theme,
			page: {
				size: 10,
				current: 1,
			},
			phone: "",
			tableData: [],
			loadmore: false,
			liveId: "",
		};
	},
	onLoad(options) {
		this.liveId = options.liveId;
		this.page.current = 1;
		this.tableData = [];
		this.getTableData();
	},
	onReachBottom() {
		if (this.loadmore) {
			this.page.current = this.page.current + 1;
			this.getTableData();
		}
	},
	methods: {
		handleBan(userId) {
			uni.showModal({
				title: "提示",
				content: "确认拉黑用户吗?",
				showCancel: true,
				success: ({ confirm, cancel }) => {
					if (confirm) {
						api
							.liveblacklistuser({
								liveId: this.liveId,
								userId: userId,
							})
							.then((res) => {
								uni.showToast({
									title: "拉黑成功",
									icon: "none",
								});
								this.page.current = 1;
								this.tableData = [];
								this.getTableData();
							});
					}
				},
			});
		},
		search() {
			this.page.current = 1;
			this.tableData = [];
			this.getTableData();
		},
		getTableData() {
			this.loadmore = true;
			let para = {
				...this.page,
				phone: this.phone,
				liveId: this.liveId,
			};
			api.liveOnlineUser(util.filterForm(para)).then((res) => {
				let data = res.data.records;
				this.tableData = [...this.tableData, ...data];
				if (data.length < this.page.size) {
					this.loadmore = false;
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.search {
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	.input {
		flex: 1;
		margin: 0 20rpx;
		input {
			min-height: 70rpx;
		}
	}
	.btn {
		padding: 0 40rpx;
		margin: 10rpx 0;
		margin-right: 10rpx;
		color: #fff;
		height: 70rpx;
		background-color: #007aff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.headingImg {
	width: 120rpx;
	height: 120rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.userInfo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
</style>
